In Panel Card Properties
Description
Defines how to display the embedded object when placed inside a Panel.
Discussion
The In Panel Card Properties define how to display the embedded component/page when placed in a Panel card.
These properties are only exposed if the embedded object is inside a Panel card.
Fill Panel Card Container
Should the embedded component completely fill the Panel Card in which it is displayed?
Delay render till visible
Should this embedded component be rendered when the host page loads, or only when the Panel Card gets focus (assuming that the Panel Card is hosted in a Panel Navigator).
Refresh when Panel Card gets focus
Should the embedded component be refreshed every time the Panel Card gets focus (assuming the Panel Card is hosted in a Panel Navigator).
Synchronize when Panel Card gets focus
This property only applies to UX components embedded in a Panel inside a Panel Navigator.
Synchronize when Panel Card gets focus allows you to automatically synchronize the UX when the Panel receives focus.
If this option is checked, the embedded UX component's server-side onSynchronize event and client-side onSynchronizeDialog events are fired.
If you check this option, you must give the embedded component a specific alias. You must not use the default <DefaultAlias> setting.
Pre-render
This property is only shown when Delay render till visible is checked.
If checked, the embedded component will be pre-rendered by making an automatic Ajax callback when the parent component is loaded. Pre-rendering the embedded component eliminates the need to make an Ajax Callback to fetch the component from the server. This means that when the user navigates to the Panel Card that contains the embedded component, there is no delay.
Pre-rendering happens at design time. All HTML, CSS, and JavaScript for the embedded object's layout is computed and saved with the parent component. The data to populate the component is computed at run-time. This includes fetching List data and computing initial values for controls.
If the Panel card contains multiple embedded objects, you must enable Pre-render for all embedded objects.
Watch the video below, "Pre-load Embedded Components in Panel Cards", to learn more.
Videos
Pre-load Embedded Components in Panel Cards
A common design pattern when building web apps is to use a UX Component with a Panel Navigator and child Panel Cards as the main controller for your application. Each Panel Cards may contain an embedded component. Embedded components are typically set to delay render till visible so as not to slow down the loading of the main controller UX. However, when the user gives focus to one of the Panel Cards, which causes the embedded component to load, you might want the embedded component to load instantly. This is now easily done by pre-loading the embedded components when the main controller component is loaded.
See Also